<template>
	<div id="Cardcolor">
		
		<!-- 顶部 -->
		<div class="top">
				  <!-- 返回标志 -->
				  <div class="back">
					  <router-link to="/EditAccount">
						  <!-- <span class="bback"><</span> -->
						  <img class="bback" src="../../com.jz.youyu/ic_toolbar_back_arrow.png" />
					  </router-link>
				  </div>
				  <!-- 标题 -->
				  <span class="title">编辑卡片颜色</span>
		</div>
		
		<!-- 中间框 -->
		<div class="cardcolormid" :class="{active1:isActive1,active2:isActive2,active3:isActive3,
		active4:isActive4,active5:isActive5,active6:isActive6,active7:isActive7,active8:isActive8,
		active9:isActive9,active10:isActive10,active11:isActive11,active12:isActive12}">
			<span class="cardcolormidaccountname" v-model="accountname">{{accountname}}</span>
			<span class="cardcolormidaccountmoney" v-model="accountmoney">{{accountmoney}}</span>
		</div>
		
		<!-- 选择颜色框 -->
		<div class="choosecolor">
			
			<div class="cc" @click="choosecolor1" >
				<div style="background-color: #fe7ab3;"></div>
			</div>
			<div class="cc" @click="choosecolor2" >
				<div style="background-color: #fb7d7e;"></div>
			</div>
			<div class="cc" @click="choosecolor3" >
				<div style="background-color: #899cfc;"></div>
			</div>
			<div class="cc" @click="choosecolor4" >
				<div style="background-color: #85c6f0;"></div>
			</div>
			<div class="cc" @click="choosecolor5" >
				<div style="background-color: #5cdede;"></div>
			</div>
			<div class="cc" @click="choosecolor6" >
				<div style="background-color: #73d999;"></div>
			</div>
			<div class="cc" @click="choosecolor7" >
				<div style="background-color: #f7c065;"></div>
			</div>
			<div class="cc" @click="choosecolor8" >
				<div style="background-color: #fe9663;"></div>
			</div>
			<div class="cc" @click="choosecolor9">
				<div style="background-color: #d2be5f;"></div>
			</div>
			<div class="cc" @click="choosecolor10">
				<div style="background-color: #9c8bfd;"></div>
			</div>
			<div class="cc" @click="choosecolor11">
				<div style="background-color: #d079ec;"></div>
			</div>
			<div class="cc" @click="choosecolor12">
				<div style="background-color: #62aafd;"></div>
			</div>
			
		</div>
		
		
	</div>
	
	
	
</template>

<script>
	
	export default{
		data(){
			return{
				accountname:'现金',
				accountmoney:'0.00',
				
				// 颜色变换
				isActive1:true,isActive2:false,isActive3:false,isActive4:false,
				isActive5:false,isActive6:false,isActive7:false,isActive8:false,
				isActive9:false,isActive10:false,isActive11:false,isActive12:false,
			}
		},
		methods:{
			// choosecolor(i){
			// 	switch (i){
			// 		case 1:
			// 		this.isActive1=true; this.isActive2=false; this.isActive3=false; this.active4=false;
			// 		this.isActive5=false; this.isActive6=false; this.isActive7=false; this.active8=false;
			// 		this.isActive9=false; this.isActive10=false; this.isActive11=false; this.active12=false;
			// 		break;
			// 		case 1:
			// 		this.isActive1=false; this.isActive2=true; this.isActive3=false; this.active4=false;
			// 		this.isActive5=false; this.isActive6=false; this.isActive7=false; this.active8=false;
			// 		this.isActive9=false; this.isActive10=false; this.isActive11=false; this.active12=false;
			// 		break;
			// 	}
			// }
			
			choosecolor1(){
				this.isActive1=true; this.isActive2=false; this.isActive3=false; this.isActive4=false;
				this.isActive5=false; this.isActive6=false; this.isActive7=false; this.isActive8=false;
				this.isActive9=false; this.isActive10=false; this.isActive11=false; this.isActive12=false;
				setTimeout(()=>{
					this.$router.go("-1");
				},500)
			},
			choosecolor2(){
				this.isActive1=false; this.isActive2=true; this.isActive3=false; this.isActive4=false;
				this.isActive5=false; this.isActive6=false; this.isActive7=false; this.isActive8=false;
				this.isActive9=false; this.isActive10=false; this.isActive11=false; this.isActive12=false;
				setTimeout(()=>{
					this.$router.go("-1");
				},500)
			},
			choosecolor3(){
				this.isActive1=false; this.isActive2=false; this.isActive3=true; this.isActive4=false;
				this.isActive5=false; this.isActive6=false; this.isActive7=false; this.isActive8=false;
				this.isActive9=false; this.isActive10=false; this.isActive11=false; this.isActive12=false;
				setTimeout(()=>{
					this.$router.go("-1");
				},500)
			},
			choosecolor4(){
				this.isActive1=false; this.isActive2=false; this.isActive3=false; this.isActive4=true;
				this.isActive5=false; this.isActive6=false; this.isActive7=false; this.isActive8=false;
				this.isActive9=false; this.isActive10=false; this.isActive11=false; this.isActive12=false;
				setTimeout(()=>{
					this.$router.go("-1");
				},500)
			},
			choosecolor5(){
				this.isActive1=false; this.isActive2=false; this.isActive3=false; this.isActive4=false;
				this.isActive5=true; this.isActive6=false; this.isActive7=false; this.isActive8=false;
				this.isActive9=false; this.isActive10=false; this.isActive11=false; this.isActive12=false;
				setTimeout(()=>{
					this.$router.go("-1");
				},500)
			},
			choosecolor6(){
				this.isActive1=false; this.isActive2=false; this.isActive3=false; this.isActive4=false;
				this.isActive5=false; this.isActive6=true; this.isActive7=false; this.isActive8=false;
				this.isActive9=false; this.isActive10=false; this.isActive11=false; this.isActive12=false;
				setTimeout(()=>{
					this.$router.go("-1");
				},500)
			},
			choosecolor7(){
				this.isActive1=false; this.isActive2=false; this.isActive3=false; this.isActive4=false;
				this.isActive5=false; this.isActive6=false; this.isActive7=true; this.isActive8=false;
				this.isActive9=false; this.isActive10=false; this.isActive11=false; this.isActive12=false;
				setTimeout(()=>{
					this.$router.go("-1");
				},500)
			},
			choosecolor8(){
				this.isActive1=false; this.isActive2=false; this.isActive3=false; this.isActive4=false;
				this.isActive5=false; this.isActive6=false; this.isActive7=false; this.isActive8=true;
				this.isActive9=false; this.isActive10=false; this.isActive11=false; this.isActive12=false;
				setTimeout(()=>{
					this.$router.go("-1");
				},500)
			},
			choosecolor9(){
				this.isActive1=false; this.isActive2=false; this.isActive3=false; this.isActive4=false;
				this.isActive5=false; this.isActive6=false; this.isActive7=false; this.isActive8=false;
				this.isActive9=true; this.isActive10=false; this.isActive11=false; this.isActive12=false;
				setTimeout(()=>{
					this.$router.go("-1");
				},500)
			},
			choosecolor10(){
				this.isActive1=false; this.isActive2=false; this.isActive3=false; this.isActive4=false;
				this.isActive5=false; this.isActive6=false; this.isActive7=false; this.isActive8=false;
				this.isActive9=false; this.isActive10=true; this.isActive11=false; this.isActive12=false;
				setTimeout(()=>{
					this.$router.go("-1");
				},500)
			},
			choosecolor11(){
				this.isActive1=false; this.isActive2=false; this.isActive3=false; this.isActive4=false;
				this.isActive5=false; this.isActive6=false; this.isActive7=false; this.isActive8=false;
				this.isActive9=false; this.isActive10=false; this.isActive11=true; this.isActive12=false;
				setTimeout(()=>{
					this.$router.go("-1");
				},500)
			},
			choosecolor12(){
				this.isActive1=false; this.isActive2=false; this.isActive3=false; this.isActive4=false;
				this.isActive5=false; this.isActive6=false; this.isActive7=false; this.isActive8=false;
				this.isActive9=false; this.isActive10=false; this.isActive11=false; this.isActive12=true;
				setTimeout(()=>{
					this.$router.go("-1");
				},500)
			}
			
			
		}
	}
	
</script>

<style>
	/* active */
	.active1{
		background-color: #fb82b5;
	}
	.active2{
		background-color: #fd7574;
	}
	.active3{
		background-color: #8b9efa;
	}
	.active4{
		background-color: #86c7f0;
	}
	.active5{
		background-color: #5cdede;
	}
	.active6{
		background-color: #70da9c;
	}
	.active7{
		background-color: #f6c060;
	}
	.active8{
		background-color: #fc9460;
	}
	.active9{
		background-color: #d1be5e;
	}
	.active10{
		background-color: #9484ff;
	}
	.active11{
		background-color: #d079ec;
	}
	.active12{
		background-color: #5faaff;
	}
	
	body{
		margin: 0;
		padding: 0;
		background-color: #F6F6F6;
	}
	/* 顶部 */
	.top{
		padding-top: 5px;
		height: 35px;
		width: 100%;
		background-color: white;
	}
	.top>.back{
		height: 100%;
		width: 20px;
		margin-left: 7px;
		float: left;
		margin-top: 5px;
	}
	a{
	  text-decoration: none;
	}
	.router-link:active{
		text-decoration: none;
	}
	.bback{
		width: 15px;
		height: 20px;
	}
	.top>.title{
		width: 40%;
		height: 100%;
		font-weight: 600;
		float: left;
		margin-top: 5px;
	}
	
	/* 中间框 */
	.cardcolormid{
		height: 60px;
		width: 90%;
		margin: 15px auto;
		/* background-color: #fe7ab3; */
		border-radius: 5px;
	}
	.cardcolormidaccountname{
		width: 80px;
		float: left;
		color: white;
		font-size: 16px;
		font-weight: 200;
		line-height: 60px;
	}
	.cardcolormidaccountmoney{
		width: 50px;
		float: right;
		color: white;
		line-height: 60px;
		font-size: 16px;
		font-weight: 200;
	}
	
	/* 颜色选择 */
	.choosecolor{
		width: 90%;
		height: 135px;
		/* background-color: gray; */
		margin: 10px auto;
	}
	.cc{
		width: 25%;
		height: 40px;
		background-color: white;
		float: left;
		margin: 2.5px auto;
	}
	.cc>div{
		width: 90%;
		height: 35px;
		margin: 2.5px auto;
		border-radius: 6px;
	}
	
	
</style>
